<template>
  <div class="pb-49">
    <!--  轮播图  -->
    <div class="relative px-15 mb-15">
      <van-swipe :autoplay="3000" lazy-render>
        <van-swipe-item
          v-for="item in carouselImgInfoList"
          :key="item.id"
          @click="handleSwipeItem(item)"
        >
          <img
            :src="item.imgPath"
            :alt="item.name"
            class="w-full h-110 rounded-12"
          />
        </van-swipe-item>
        <template #indicator="{ active }">
          <div
            class="flex justify-center items-center w-full absolute left-0 bottom-0 pb-8"
          >
            <div
              v-for="(item, index) in carouselImgInfoList"
              :key="item.id"
              class="h-3 rounded-2 mr-3"
              :class="
                index === active ? 'w-6 c-bg-white-50' : 'w-10 c-bg-white-10'
              "
            />
          </div>
        </template>
      </van-swipe>
    </div>
    <!--  极速数字人、2D数字人  -->
    <div class="relative px-15 flex">
      <div class="w-173 h-88">
        <img
          class="size-full"
          :src="`${IMG_CDN_39}/home/home_no_train_video_banner2.jpg`"
          alt="极速数字人"
        />
        <div
          class="banner-chat-bubble c-pointer-events-none pb-4 absolute flex justify-center items-center w-21 h-15 top-29 left-50"
          :style="{
            backgroundImage: `url(${IMG_CDN_39}/home/banner_chat_bubble.png)`
          }"
        >
          <img
            class="w-15 h-7"
            :src="`${IMG_CDN_39}/home/banner_chat_content.png`"
            alt="极速数字人tips"
          />
        </div>
      </div>
      <div class="w-173 h-88">
        <img
          class="size-full"
          :src="`${IMG_CDN_39}/home/home_create_video_banner5.jpg`"
          alt="2D数字人"
        />
      </div>
    </div>
    <!--  快捷区域列表  -->
    <div class="px-15 mt-22 flex justify-between items-center">
      <div
        v-for="item in quickAreaList"
        :key="item.link"
        class="flex flex-col items-center"
        @click="quickAreaHandle(item)"
      >
        <img
          class="w-32 h-32"
          :src="`${IMG_CDN_39}/home/${item.img}`"
          :alt="item.label"
        />
        <div class="mt-2 text-12 text-white w-full text-center">
          {{ item.label }}
        </div>
      </div>
    </div>
    <!--  分类列表  -->
    <div v-for="item in categoryInfoList" :key="item.id" class="mt-20">
      <div>
        <div class="px-15 mb-15 flex justify-between items-center text-white">
          <div class="text-18 font-bold">{{ item.name }}</div>
          <div
            class="flex items-center pl-9 pr-7 h-27 ml-auto rounded-5 border border-2F2F33"
          >
            <div class="mr-3 text-12" @click="navigateTo('TemplateList', item)">
              更多
            </div>
            <!-- 使用阿里云图标库图标（注意前缀） -->
            <svg-icon name="icon-gengduo" :size="10" color="#fff" />
          </div>
        </div>
        <div
          class="scroll-view scroll-view--horizontal hide-scrollbar overflow-x-auto"
        >
          <div class="flex items-center pl-15 scroll-view__content">
            <div
              v-for="cItem in item.contentList"
              :key="cItem.id"
              class="template-item"
              @click="navigateTo('TempleVideo', cItem)"
            >
              <img
                class="w-107 h-190 rounded-10 object-cover"
                :src="cItem.cover"
                alt="视频封面"
              />
              <div
                class="w-107 mt-8 text-999999 text-14 overflow-hidden whitespace-nowrap text-ellipsis"
              >
                {{ cItem.name }}
              </div>
            </div>
            <div
              v-if="item.contentList && item.contentList.length > 3"
              class="inline-block px-15 text-white"
              @click="navigateTo('TemplateList', item)"
            >
              <span
                class="inline-flex items-center justify-center h-26 w-26 mr-6 rounded-[50%] border border-solid border-2F2F33"
              >
                <!-- 使用阿里云图标库图标（注意前缀） -->
                <svg-icon name="icon-gengduo" :size="10" color="#fff" />
              </span>
              <span class="text-14 align-middle">更多</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- AI数字人电脑端 -->
    <PcGuideDrawer v-model:show="showBottom" />
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from "vue";
import { IMG_CDN_39 } from "@/constants";
import {
  CarouselImgInfoData,
  CategoryInfoData,
  categoryList,
  contentInfoData,
  getCarouselImgList
} from "@/api/Home";
import router, {toRouteType} from "@/router";
import {useCachedViewStoreHook} from "@/store/modules/cached-view";
defineOptions({
  name: "Home"
});
// 轮播图信息列表
const carouselImgInfoList = ref<CarouselImgInfoData[]>([]);
// 获取轮播图信息接口
const getCarouselImgListPort = async () => {
  carouselImgInfoList.value = await getCarouselImgList();
};
const handleSwipeItem = (item: CarouselImgInfoData) => {
  if (item.type === 1) {
    const routerMap: Record<string, string> = {
      "/pages/spread/index/index": "Spread",
      "/pages/myHuman/index": "MyHuman",
      "/pages/noTrainVideoIntro/index": "NoTrainVideoIntro"
    };
    router.push({
      name: routerMap[item.link]
    });
  } else if (item.type === 2) {
    router.push({
      name: "PackageList",
      params: {
        id: item.link
      }
    });
  } else {
    window.open(item.link);
  }
};
// 定义快捷区域项的类型
interface QuickAreaItem {
  /** 名称 */
  label: string;
  /** 图片 */
  img: string;
  /** 跳转链接 */
  link: string;
}
// 快捷区域数据列表
const quickAreaList: QuickAreaItem[] = [
  {
    label: "照片说话",
    img: "quick_create_picture_video.png",
    link: "CreatePictureVideo"
  },
  {
    label: "AI生文",
    img: "quick_generate_ai_copy2.png",
    link: "AiCopyGenerator"
  },
  {
    label: "定制数字人",
    img: "quick_create_human.png",
    link: "myHuman"
  },
  {
    label: "定制音色",
    img: "quick_create_timbre.png",
    link: "timbre"
  },
  {
    label: "电脑端",
    img: "quick_pc_client.png",
    link: "PcGuideDrawer"
  }
];

// 底部弹窗
const showBottom = ref(false);

// 快捷区域点击事件
const quickAreaHandle = (params: QuickAreaItem) => {
  if (params.link === "PcGuideDrawer") {
    showBottom.value = true;
    return;
  }
  if (["myHuman", "timbre"].includes(params.link)) {
    router.push({
      name: "MyHuman",
      params: { type: params.link }
    });
    return;
  }
  // 清除目标页面缓存
  const cachedViewStore = useCachedViewStoreHook();
  cachedViewStore.delCachedView({ name: params.link } as toRouteType);
  router.push({
    name: params.link
  });
};

// 分类请求参数
interface CategoryRequestParam {
  pid: number;
  homeShow: number;
}
// 分类请求列表
const categoryInfoList = ref<CategoryInfoData[]>([]);
// 分类请求接口
const categoryListPort = async () => {
  const categoryRequestParam: CategoryRequestParam = { pid: 0, homeShow: 1 };
  categoryInfoList.value = await categoryList(categoryRequestParam);
};

// 跳转页面
const navigateTo = (
  routeName: string,
  params: CategoryInfoData | contentInfoData
) => {
  router.push({
    name: routeName,
    params: { id: params.id, name: params.name }
  });
};

onMounted(() => {
  getCarouselImgListPort();
  categoryListPort();
});
</script>
<style scoped>
@keyframes BubbleAnimate {
  0% {
    opacity: 0;
    transform: scale(0.2) rotate(-15deg) translateY(20rpx);
  }
  6% {
    opacity: 1;
    transform: scale(1.1) rotate(0);
  }
  8%,
  65% {
    opacity: 1;
    transform: scale(1) rotate(0);
  }
  75%,
  100% {
    opacity: 0;
    transform: scale(0.2) rotate(-15deg);
  }
}
.banner-chat-bubble {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  transform-origin: 12rpx bottom;
  animation: BubbleAnimate 4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  opacity: 0;
}
.c-pointer-events-none {
  pointer-events: none;
}
.template-item:not(:first-child) {
  margin-left: 10px;
}
</style>
